<template>
  <div class="home-container">
    <!-- 数据统计卡片 -->
    <div class="flex gap-6 mb-6">
      <div class="stat-card">
        <div class="icon-wrapper bg-[#ecf5ff]">
          <el-icon class="text-[#409EFF] text-4xl"><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-title">班级总数</div>
          <div class="stat-value">{{ CountData.classCount }}</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="icon-wrapper bg-[#f0f9eb]">
          <el-icon class="text-[#67C23A] text-4xl"><Edit /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-title">试题总数</div>
          <div class="stat-value">{{ CountData.questionCount }}</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="icon-wrapper bg-[#fdf6ec]">
          <el-icon class="text-[#E6A23C] text-4xl"><Files /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-title">试卷总数</div>
          <div class="stat-value">{{ CountData.examCount }}</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="flex gap-6">
      <div class="chart-card flex-1">
        <div class="chart-title">班级人数分布</div>
        <div ref="classChartRef" class="chart-container"></div>
      </div>
      <div class="chart-card flex-1">
        <div class="chart-title">班级试卷分布</div>
        <div ref="examChartRef" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { allCounts, getClasslist, getExamlist } from '@/api/teacher'
import { Document, Edit, Files } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const classChartRef = ref(null)
const examChartRef = ref(null)

const CountData = reactive({
  classCount: 0,
  examCount: 0,
  questionCount: 0,
})

// 班级列表
const ClassList = ref([])

// 试卷列表
const ExamList = ref([])

watch(ClassList, (newVal) => {
  initClassChart()
})

watch(ExamList, (newVal) => {
  initExamChart()
})

// 获取所有统计数据
const getCounts = async () => {
  const res = await allCounts()
  Object.assign(CountData, res.data)
}
// 获取班级列表
const getClassList = async () => {
  const res = await getClasslist()
  console.log(res)
  ClassList.value = res.data.map((item) => ({
    value: item.totalStudent,
    name: item.gradeName,
  }))
}
// 获取试卷列表
const getExamList = async () => {
  const res = await getExamlist()
  ExamList.value = res.data.map((item) => ({
    value: item.total,
    name: item.gradeName,
  }))
}

// 初始化班级分布图表
const initClassChart = () => {
  const chart = echarts.init(classChartRef.value)
  chart.setOption({
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        data: ClassList.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
}

// 初始化试卷分布图表
const initExamChart = () => {
  const chart = echarts.init(examChartRef.value)
  chart.setOption({
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        data: ExamList.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
}

onMounted(() => {
  // 获取所有统计数据
  getCounts()
  getClassList()
  getExamList()
  // 初始化班级分布图表
  initClassChart()
  // 初始化试卷分布图表
  initExamChart()
})
</script>

<style scoped>
.home-container {
}

.stat-card {
  @apply flex items-center bg-white rounded-lg p-6 flex-1 shadow-sm hover:shadow-md transition-shadow duration-300;
}

.icon-wrapper {
  @apply w-16 h-16 rounded-lg flex items-center justify-center mr-5 shadow-sm transition-all duration-300;
}

.stat-card:hover .icon-wrapper {
  transform: scale(1.05);
}

.stat-content {
  flex: 1;
}

.stat-title {
  @apply text-[#909399] text-sm mb-2 font-medium;
}

.stat-value {
  @apply text-[#303133] text-3xl font-medium;
}

.chart-card {
  @apply bg-white rounded-lg p-6 shadow-sm;
}

.chart-title {
  @apply text-lg font-medium mb-4 text-[#303133];
}

.chart-container {
  height: 400px;
}
</style>
